<template>
  <div class="container" v-loading="loading">
    <div class="toolbar">
      <div class="inner-toolbar">
        <div class="toolbar-btns">
          <el-button size="mini" type="primary" @click="handleBatchDelete()">删除</el-button>
          <el-button size="mini" type="primary" @click="handleBatchEndBargain()">结束砍价</el-button>
        </div>
        <div class="toolbar-search">
          <en-table-search 
          @search="searchEvent" 
          @advancedSearch="advancedSearchEvent"
          advanced
          advancedWidth="550">
            <template slot="advanced-content">
              <el-form :model="advancedForm" label-width="90px" ref="advancedForm">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="流水号:" prop="mingchneg">
                      <el-input v-model="advancedForm.mingchneg" placeholder="流水号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="砍价状态:" prop="moshi">
                      <el-select v-model="advancedForm.moshi" placeholder="砍价状态">
                        <el-option 
                          v-for="(item,index) in modes"
                          :key="index"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="商品名称:" prop="">
                      <el-input v-model="advancedForm" placeholder="商品名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="砍价用户">
                      <el-select v-model="advancedForm" placeholder="砍价用户">
                        <el-option></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </template>
          </en-table-search>
        </div>
      </div>
    </div>
    <el-form 
      :model="tableDataForm" 
      :rules="tableDataFormRules" 
      ref="tableDataForm">
      <el-table 
        ref="table" 
        :data="tableDataForm.data" 
        @selection-change="selectionChange" 
        highlight-current-row
        :height="tableHeight">
        <el-table-column fixed type="selection" width="55"></el-table-column>
        <el-table-column prop="" label="砍价流水号" min-width="180">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="砍价状态" prop="" min-width="100">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="商品大图" prop="" min-width="90">
          <template slot-scope="scope">
            <img class="img_width" :src="scope.row" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称, 规格×数量" prop=""  min-width="140">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="砍价用户" prop="" min-width="120">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="已砍人数" prop="" min-width="120">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="已砍刀数" prop="" min-width="120">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="砍价时间" prop="" min-width="120">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="结束时间" prop="" min-width="120">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="砍价备注" prop="" min-width="120">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column label="砍价记录" prop="" min-width="120">
          <template slot-scope="scope">
            <span v-html="scope.row"></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="{ row }">
            <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
            <el-button type="primary" size="mini" @click="handleEndBargain(row)">结束砍价</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="bottom-total">
      <el-pagination
        slot="pagination"
        v-if="pageData"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
        :current-page="params.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total">
      </el-pagination>
    </div>
    <el-dialog
    title="结束砍价"
    width="450px"
    :visible.sync="endBargainDialog">
      <el-form 
        :model="endBargainForm" 
        :rules="endBargainFormRules" 
        ref="endBargainForm"
        label-width="90px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="砍价结果" prop="">
              <el-radio-group v-model="endBargainForm">
                <el-radio :label="3">备选项</el-radio>
                <el-radio :label="6">备选项</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="砍价备注" prop="">
              <el-input type="textarea" v-model="endBargainForm" placeholder="砍价备注(100字以内)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'bargain-recording',
  data() {
    return {
      multipleSelection: [],
      /** 列表loading状态 */
      loading: false,
      // table表单
      tableDataForm: {
        data: []
      },
      // 查询参数
      advancedForm: {
        mingchneg: undefined,
        moshi: undefined
      },
      /** 列表参数 */
      params: {
        page_no: 1,
        page_size: 10
      },
      data_total: 0,
      // 分页数据
      pageData: {},
      skuIds: [],
      // 添加商品弹框     
      showDialog: false,
      // 结束砍价弹框
      endBargainDialog: false,
      /** 商品选择器最大长度*/
      maxsize: 0,
      /** 商品选择器列表api*/
      goodsApi: 'seller/goods/skus?market_enable=1&is_auth=1',
      multipleApi: 'seller/goods/skus/@ids/details',
      /** 商城分类api */
      categoryApi: 'seller/goods/category/0/children', 
      //商品列表验证
      tableDataFormRules: {
        shetuan_price: [
          {
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          }
        ],
        priority: [
          {
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^[0-9]+$/,
            message: '请输入正整数'
          }
        ],
        cost: [
          {
            required: true,
            message: '请输入有效值',
            trigger: 'blur'
          },
          {
            pattern: /^([0-9]+\.[0-9]|\d|\s)*$/,
            message: '请输入整数或小数！'
          }
        ]
      },
      status: [
        {
          label: '待上线',
          value: 10
        },
        {
          label: '已上线',
          value: 20
        },
        {
          label: '已下线',
          value: 30
        }
      ],
      modes: [
        {
          label: '砍到0元免费拿',
          value: 0
        },
        {
          label: '看多少,jian',
          value: 1
        }
      ]
    }
  },
  computed: {
    tableHeight (){
      return document.documentElement.clientHeight - 246 + 'px';
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 获取砍价商品列表 }
    */
    getDataList() {
      
    },
    /** 分页大小发生改变 */
    handlePageSizeChange(size) {
      this.params.page_size = size;
      this.getDataList();
    },
    /** 分页页数发生改变 */
    handlePageCurrentChange(page) {
      this.params.page_no = page;
      this.getDataList();
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 添加商品 }
    */
    addGoods(index) {
      this.showDialog = true;
    },
    /**
      * @date 2020/10/22
      * @author kaiqiang
      * @description { 查看商品状态 }
    */
    handleSelect(event) {
      this.params = {
        ...this.params,
        status: event
      }
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 模糊查询 }
    */
    searchEvent(event) {
      this.params = {
        ...this.params,
        status: event
      }
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 高级搜索查询 }
    */
    advancedSearchEvent(event) {
      this.params = {
        ...this.params,
        statut: event
      }
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 保存选中的商品 }
    */
    refreshFunc(val) {
      
    },
    selectionChange(value) {
      this.multipleSelection = value;
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 删除 }
    */ 
    handleDelete(row) {
      this.$confirm('确定要执行此操作吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 结束砍价 }
    */
    handleEndBargain(row) {

    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 批量删除 }
    */
    handleBatchDelete() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'warning',
          message: '您还没有选择数据哦!!!'
        })
        return
      }
      this.$confirm('确认要删除这些数据吗?')
        .then(_ => {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
        .catch(_ => {
          this.$message({
            type: 'warning',
            message: '操作已取消!'
          })
        }) 
    },
    /**
      * @date 2020/10/23
      * @author kaiqiang
      * @description { 批量结束砍价 }
    */
    handleBatchEndBargain() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'warning',
          message: '您还没有选择数据哦!!!'
        })
        return
      } else {
        this.endBargainDialog = true;
      } 
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  /deep/ div.toolbar {
    height: 70px;
    padding: 20px 0;
  }
  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }

  /deep/ .el-table {
    width: 100%;
    overflow-x: scroll;
    & th:not(.is-left),
    & td:not(.is-left) {
      text-align: center;
    }
  }

  /deep/ .el-table__body {
    .el-form-item {
      margin-bottom: 0;
    }

    .el-input-group__prepend {
      padding: 0 12px;
    }

    .el-input-group__append {
      padding: 0 10px;
    }

    .el-form-item__content {
      position: static;
    }

    .el-form-item__error {
      display: inline-block;
      margin-top: -20px;
      margin-left: 12px;
    }
  }

  /** 工具栏样式 */
  .toolbar {
    display: flex;
    align-items: center;
    height: 44px;
    border-bottom: 1px solid #e6ebf5;
    background-color: #fff;
  }

  .inner-toolbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0 20px;
  }

  .img_width {
    width: 60px;
    height: 60px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .bottom-total {
    padding-top: 10px;
    text-align: right;
  }

  div.toolbar-btns {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .el-button {
      margin-right: 10px;
      & + .el-button {
        margin-left: 0;
      }
    }
    div {
      span {
        display: inline-block;
        font-size: 14px;
        color: #606266;
      }
    }
  }
</style>